<template>
    <view class="container" :style="themeColor">
        <search-bar :placeholderText="placeholderText" :actions="actions" @searchFn="searchFn"> </search-bar>
        <tab-bar-scroll class="tab-bar-scroll-bg" :tabs="tabs" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar-scroll>
        <view v-if="!isloadding">
            <view class="edit-btn" @click="goUrl('/pages_me/packet/moment/release')">
                <iconsfont class="icon-edit" customIcons="icon-xiugai" :color="'#ffffff'" size="36"></iconsfont>
                <text class="edit-text">发布</text>
            </view>
            <swiper
                class="product-main-list"
                :style="{ height: listHeight }"
                :current="tabIndex"
                @change="swiperChange">
                <swiper-item v-for="(itemt, i) in tabs">
                    <moment-list
                        v-if="load"
                        ref="mescrollItem"
                        :i="i"
                        :index="tabIndex"
                        :tabs="tabs"
                        :height="listHeight"
                        :state="itemt.ID"
                        @shareFn="shareFn"
                        :requestData="requestData">
                    </moment-list>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import searchBar from "@/components/common/search-bar.vue"
import momentList from "@/pages_me/components/moment/moment-list.vue"
import tabBarBorder from "@/pages_me/components/moment/tab-bar-border.vue"
import tabBarScroll from "@/components/common/tab-bar-scroll.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import { GetMomentCategoryList, GetMomentList } from "@/service/api/moment.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        momentList,
        tabBarBorder,
		tabBarScroll,
        searchBar,
    },
    data() {
        return {
            actions: [],
            placeholderText: "搜索",
            current: 0,
            tabs: [],
            isloadding: false,
            listHeight: 0,
            tabIndex: 0, // 当前tab的下标
            load: false,
            searchKey: "",
            requestData: {
                categoryId: "",
                // isLike: -1,
                // isFollow: -1,
                // isCollection: -1,
                // mediaType: -1,
                searchKey: "",
                status: -1,
            },
            shareData: {},
        }
    },
    watch: {
        //监听更新
        getMomentView(e) {
            this.refresh()
        },
    },
    computed: {
        ...mapGetters(["getMomentView"]),
    },
    mounted() {
        this.getListHeight()
        this.getTabs()
    },
    onShareAppMessage(res) {
        var that = this
		let userInfo = storage.getCache("userInfo")
        let imageUrl
        let url
        if (res.from === "button") {
            // 来自页面内分享按钮
            if (this.shareData.VideoUrl) {
                url = "/pages_me/packet/moment/moment_video?id=" + this.shareData.ID+"&tel="+userInfo.Tel
                imageUrl = this.easyGetImgUrl(this.shareData.VideoImgSrc)
            } else {
                url = "/pages_me/packet/moment/moment_detail?id=" + this.shareData.ID+"&tel="+userInfo.Tel
                if (this.shareData.ImageArray && this.shareData.ImageArray.length > 0) {
                    imageUrl = that.easyGetImgUrl(this.shareData.ImageArray[0])
                }
            }
            return {
                imageUrl: imageUrl,
                title: this.shareData.Content,
                path: url,
                success(resp) {},
            }
        }
    },
    methods: {
        getTabs() {
            GetMomentCategoryList().then((res) => {
                if (res.State == 1) {
                    let recommend = [{ ID: 0, Name: "推荐" }]
                    this.tabs = recommend.concat(res.Data)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        getListHeight(element) {
            //获取列表高度
            getElementHeight(this, ".product-main-list", (e) => {
                //再获取列表高度
                this.listHeight = e + "px"
                this.load = true
            })
        },
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
        },
        swiperChange(e) {
            this.tabIndex = e.detail.current
            this.clickTab(this.tabIndex)
        },
        //搜索
        searchFn(searchKey) {
            this.requestData.searchKey = searchKey
            this.refresh()
        },
        //分享
        shareFn(data) {
            this.shareData = data
        },
        refresh() {
            this.isloadding = true
            this.$nextTick(() => {
                this.isloadding = false
            })
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}

.bottom-bar {
    .btn {
        width: 100%;
        margin-left: 0;
        border-radius: 100rpx;
    }
}
.edit-btn {
    position: fixed;
    right: 0;
    top: 500rpx;
    z-index: 1000;
    background: $app-color-main;
    color: #fff;
    border-radius: 26rpx 0 0 26rpx;
}
.edit-btn .icon-edit {
    font-size: 36rpx;
    margin-left: 26rpx;
}
.edit-text {
    font-size: 28rpx;
    display: inline-block;
    line-height: 52rpx;
    color: #ffffff;
    padding: 0 30rpx 0 15rpx;
}
.tab-bar-scroll-bg {
    background: #ffffff;
}
</style>
